// 布局类
html,
body,
#root {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--vscode-editor-background) !important;
}

.fr-generator-container {
  background-color: #fff;
}

.dnd-container > .field-wrapper > .fr-field {
  color: var(--vscode-input-foreground) !important;
  margin-bottom: 0;
}

.left-layout > .f6.b:last-of-type,
.left-layout > .pl0:last-of-type {
  display: none;
}

.preview-mode {
  .left-layout,
  .right-layout,
  .field-wrapper > div[style] {
    display: none !important;
  }
}

.theme {
  // 容器类
  .fr-wrapper,
  .fr-generator-container,
  .bg-white,
  .field-wrapper,
  .ant-table,
  .ant-table a,
  .ant-table-tbody > tr.ant-table-row:hover > td,
  .ant-table-cell-fix-left,
  .ant-table-cell-fix-right,
  .ant-input-group-addon,
  .ant-input-affix-wrapper,
  .ant-picker-suffix,
  .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
    color: var(--vscode-input-foreground) !important;
    background-color: var(--vscode-editor-background) !important;
    outline: var(--vscode-button-background) !important;
  }

  .fr-card-item-row {
    background-color: rgba(0, 0, 0, 0.2) !important;
  }

  .mid-layout,
  .ant-table-tbody > tr > td,
  .fr-wrapper .b--black-20 {
    border-color: var(--vscode-button-secondaryBackground) !important;
  }

  .fr-label-title {
    color: var(--vscode-input-foreground) !important;
  }

  .left-layout::-webkit-scrollbar {
    display: none;
  }

  // 子容器类
  .fr-collapse-object,
  .ant-collapse-item,
  .ant-collapse-header,
  .ant-collapse-content {
    color: var(--vscode-dropdown-foreground) !important;
    border-color: var(--vscode-dropdown-border) !important;
    background-color: var(--vscode-dropdown-background) !important;
  }

  .fr-container .fr-collapse-object {
    margin-bottom: 0 !important;
  }

  .ant-collapse {
    border-color: var(--vscode-inputOption-activeBorder) !important;
    border-bottom: 1px solid var(--vscode-inputOption-activeBorder) !important;
  }

  // 文本类
  .blue {
    color: var(--vscode-descriptionForeground) !important;
  }

  // 按钮类
  .left-item,
  .left-element,
  .ant-btn,
  .field-wrapper > div[draggable],
  .ant-tabs-nav:before {
    color: var(--vscode-button-foreground) !important;
    border-color: var(--vscode-inputOption-activeBorder) !important;
    background-color: var(--vscode-button-background) !important;
  }

  .anticon svg {
    fill: var(--vscode-button-foreground) !important;
  }

  .left-item:hover,
  .left-element:hover,
  .ant-btn:hover {
    background-color: var(--vscode-button-hoverBackground) !important;
  }

  .ant-checkbox-disabled + span {
    color: var(--vscode-debugIcon-breakpointDisabledForeground) !important;
  }

  // 组件类
  .ant-input,
  .ant-input-number,
  .ant-select,
  .ant-select-selector,
  .ant-picker,
  .ant-select-multiple .ant-select-selection-item,
  .ant-select-multiple .ant-select-selection-item-remove {
    color: var(--vscode-input-foreground) !important;
    background-color: var(--vscode-input-background) !important;
    outline: var(--vscode-button-background) !important;
  }

  .ant-table-thead > tr > th {
    color: var(--vscode-input-foreground) !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-color: var(--vscode-inputOption-activeBorder) !important;
  }

  .ant-radio-wrapper,
  .ant-checkbox-wrapper {
    color: var(--vscode-input-foreground) !important;
  }

  .ant-tabs {
    color: var(--vscode-input-foreground) !important;
  }

  .ant-tabs-ink-bar {
    background-color: var(--vscode-checkbox-foreground) !important;
  }

  .ant-tabs-tab:hover,
  .ant-tabs-tab:active {
    color: var(--vscode-editorHoverWidget-foreground) !important;
  }
}
